import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Form, Input, Button, Select, DatePicker } from 'antd'
import styles from './index.less'

const FormItem = Form.Item
const {Option} = Select
const {TextArea} = Input
const {RangePicker} = DatePicker

class MySearch extends Component {
  static propTypes = {
    submit: PropTypes.func.isRequired,
    data: PropTypes.array.isRequired
  }

  // options => {} || []
  renderSelect = (options, message) => {
    const props = {
      placeholder: message || '请选择'
    }

    if (Array.isArray(options)) {
      return (
        <Select {...props}>
          <Option value=''>全部</Option>
          {options.map(option => (
            <Option
              key={option.value || option.id}
              value={option.value || option.id}
            >{option.name}
            </Option>)
          )}
        </Select>
      )
    }
    return (
      <Select {...props}>
        <Option value=''>全部</Option>
        {Object.entries(options).map(([key, name]) => <Option key={key} value={key}>{name}</Option>
        )}
      </Select>
    )
  }

  renderItem = (type, options, message, placeholder) => {
    const components = {
      Select: this.renderSelect(options, placeholder),
      DatePicker: <DatePicker placeholder={placeholder || message}/>,
      RangePicker: <RangePicker/>,
      TextArea: <TextArea placeholder={placeholder || message} />
    }
    return components[type] || <Input placeholder={message}/>
  }

  renderFormItem = ({label, key, type, options = [], initialValue, component, placeholder}) => {
    const {form} = this.props
    const {getFieldDecorator} = form
    const message = `请输入${label}`
    const config = {}
    if (initialValue) config.initialValue = initialValue
    // 自定义组件
    if (component) {
      return (
        <FormItem key={key} label={label}>
          {getFieldDecorator(key, config)(
            component
          )}
        </FormItem>
      )
    }
    return (
      <FormItem key={key} label={label}>
        {getFieldDecorator(key, config)(
          !type ? <Input placeholder={placeholder || message}/> : this.renderItem(type, options, message, placeholder)
        )}
      </FormItem>
    )
  }

  submit = (e) => {
    e.preventDefault()
    const {form, submit} = this.props
    form.validateFields((err, values) => {
      Object.keys(values).forEach(key => {
        if (!values[key]) values[key] = ''
      })
      submit(values)
    })
  }

  reset = (e) => {
    this.props.form.resetFields()
    this.submit(e)
  }

  render() {
    const {data = []} = this.props
    return (
      <Form onSubmit={this.submit} layout='inline' className={styles.container}>
        {data.map(item => this.renderFormItem(item))}
        <div className={classnames(styles.item, 'middle-flex')}>
          <Button htmlType='submit' type='primary' style={{marginRight: 10}} icon='search'>查询</Button>
          <Button onClick={this.reset} type='danger' icon='close'>清空</Button>
        </div>
      </Form>
    )
  }
}

export default Form.create()(MySearch)
